﻿@model Core_Goods
@{
    Layout = null;
    List<Sys_Attachment> attList = ViewBag.AttList as List<Sys_Attachment>;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta charset="utf-8">
    <title>@(Model.G_Name)_花溆园艺植物商城</title>
    <link rel="stylesheet" href="\static\themes\xin\statics\css\ectouch.css">
</head>

<body style="max-width:640px;">
    <div id="loading"><img src="\static\themes\xin\statics\img\loading.gif"></div>
    <div class="con">
        <div class="goods" style="margin-bottom: 0rem;" id="n-goods-nav1">
            <div class="ect-bg">
                <header class="dis-box header-menu-1 b-color color-whie goods-fixed ts-3">
                    <a class="" href="javascript:history.go(-1)">
                        <div class="goods-left-jiat"><i class="iconfont icon-jiantou is-con"></i></div>
                    </a>
                    <div class="box-flex">
                        <ul class="dis-box goods-header-nav-box">
                            <li class="box-flex"><a class="hover" href="#n-goods-nav1"><label>商品</label></a></li>
                            <li class="box-flex"><a href="#n-goods"><label>详情</label></a></li>
                            @*<li class="box-flex"><a href=""><label>评价</label></a></li>*@
                        </ul>
                    </div>
                    <a class="" href="javascript:;">
                        <div class="goods-left-jiat"><i class="iconfont icon-gengduo j-nav-box is-con"></i></div>
                    </a>
                    <div class="goods-nav ts-3">
                        <ul class="goods-nav-box">
                            <a href="/">
                                <li><i class="iconfont icon-xiaoxi1 j-nav-box"></i>首页</li>
                            </a>
                            <a href="/main/category">
                                <li><i class="iconfont icon-home j-nav-box"></i>分类</li>
                            </a>
                            <a href="/plants/new">
                                <li><i class="iconfont icon-geren j-nav-box"></i>新品</li>
                            </a>
                            <a href="/plants/hot">
                                <li style="border:none"><i class="iconfont icon-fenxiang j-nav-box"></i>热卖</li>
                            </a>
                        </ul>
                    </div>
                </header>
            </div>

            <div class="goods-photo n-j-show-goods-img">
                <div class="hd">
                    <ul></ul>
                </div>
                <span class="goods-num" id="goods-num"><span id="g-active-num"></span>/<span id="g-all-num"></span></span>
                <ul class="swiper-wrapper">
                    @foreach (var item in attList)
                    {
                        <li class="swiper-slide tb-lr-center"><img src="@item.A_CloudUlr" alt=""></li>
                    }
                </ul>
                <div class="swiper-pagination"></div>
            </div>

            <div class="goods-info">

                <section class="goods-title b-color-f padding-all ">
                    <div class="dis-box">
                        <h3 class="box-flex">@Model.G_Name</h3>

                        <span class="heart j-heart @($"{(Model.G_Recom == 1?"active":"")}")" id='COLLECT'><i class="ts-2"></i><em class="ts-2">推荐</em></span>
                    </div>
                </section>

                <section class="goods-price padding-all b-color-f">
                    <p class="p-price">
                        <span class="t-first">
                            ￥@(Model.G_PriceDeposit.ToString("N"))元
                        </span>
                    </p>
                    <p class=" dis-box g-p-tthree m-top04">
                        <span class="box-flex text-left">销量：@(Model.G_Sales)</span>
                        <span class="box-flex text-right">库存: @(Model.G_RemainCount)</span>
                    </p>
                </section>
                <section class="padding-all text-center t-remark2 xiangqing-1 " style="margin-bottom: 0.5rem;">
                    <a href="tel:15998994791" class="j-goodsinfo-div">【花语】@Model.G_Tips</a>
                </section>
                <section class="padding-all b-color-f1 goods-service">
                    <div class="dis-box">
                        <div class="box-flex">
                            <div class="dis-box">
                                <p class="box-flex t-goods2">本服务由花溆园艺植物商城提供售后服务与产品支持</p>
                                <i class="iconfont icon-102 goods-min-icon"></i>
                            </div>
                            <div class="dis-box m-top08 g-r-rule goods-service-list">
                                <p class="box-flex t-remark3">
                                    <em class="fl em-promotion"><i class="iconfont icon-weibiaoti11"></i></em><span class="fl">正品保证</span>
                                </p>
                                <p class="box-flex t-remark3">
                                    <em class="fl em-promotion"><i class="iconfont icon-daifukuan"></i></em><span class="fl">安全交易</span>
                                </p>
                                <p class="box-flex t-remark3">
                                    <em class="fl em-promotion"><i class="iconfont icon-7tianwuliyoutuihuo"></i></em><span class="fl">用心服务</span>
                                </p>
                                <p class="box-flex t-remark3">
                                    <em class="fl em-promotion"><i class="iconfont icon-taobaojisutuikuan"></i></em><span class="fl">极速达</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="filter-btn dis-box">
            <a class="filter-btn-kefu filter-btn-a" href="tel:15998994791"><i class="iconfont icon-kefu"></i><em>客服</em></a>
            @*<a href="###" class="filter-btn-flow filter-btn-a"><i class="iconfont icon-gouwuche"></i><sup class="b-color" id='total_number'>0</sup><em>购物车</em></a>*@
            @*<a type="button" class="btn-cart box-flex n-iphone5-top1 j-goods-attr j-show-div">加入购物车</a>*@
            <a href="tel:15998994791" class="btn-submit box-flex n-iphone5-top1 j-goods-attr j-show-div">立即购买</a>
        </div>

    </div>
    <div class="n-goods-bg"></div>
    <div class="con">
        <div id="n-goods" class="goods-info of-hidden ect-tab b-color-f j-goods-info j-ect-tab ts-3" style="margin-bottom: 0.2rem;margin-top:0.2rem;">
            <div class="hd j-tab-title tab-title b-color-f of-hidden">
                <ul class="dis-box">
                    <li class="box-flex active">商品描述</li>
                    <li class="box-flex">规格参数</li>
                </ul>
            </div>
            <div id="j-tab-con" class="b-color-f m-top1px tab-con ">
                <div class="swiper-wrapper">
                    <section class="swiper-slide ">
                        <div class="padding-all"  style="min-height:220px; height:auto!important; height:220px; padding-top: 1rem;">
                            @Html.Raw(Model.G_Content)
                        </div>
                    </section>
                    <section class="swiper-slide goods-info-attr">
                        @if (string.IsNullOrEmpty(Model.G_SizeAbout))
                        {
                            <div class="no-div-message" style="min-height:220px; height:auto!important; height:220px; padding-top: 1rem;">
                                <i class="iconfont icon-biaoqingleiben"></i>
                                <p>亲，此处没有内容～！</p>
                            </div>
                        }
                        else
                        {
                            <div style="min-height:220px; height:auto!important; height:220px; padding-top: 1rem;">
                                @Html.Raw(Model.G_SizeAbout)
                            </div>
                        }
                    </section>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="\static\themes\xin\statics\js\jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="\static\themes\xin\statics\js\swiper-3.2.5.min.js"></script>
    <script type="text/javascript" src="\static\themes\xin\statics\js\ectouch.js"></script>
    <script>
        $(function ($) {

            var handler = function (e) { //禁止浏览器默认行为
                e.preventDefault();
            };

            $(".icon-gengduo").click(function () {
                $(".goods-nav").toggleClass("active");
            });

            /*商品详情相册切换*/
            var swiper = new Swiper('.goods-photo', {
                paginationClickable: true,
                onInit: function (swiper) {
                    document.getElementById("g-active-num").innerHTML = swiper.activeIndex + 1;
                    document.getElementById("g-all-num").innerHTML = swiper.slides.length;
                },
                onSlideChangeStart: function (swiper) {
                    document.getElementById("g-active-num").innerHTML = swiper.activeIndex + 1;
                }
            });
        });
    </script>

    <script>
        $(function () {
            /*头部导航*/
            $(".j-nav-box").click(function () {
                $(".j-nav-content").toggleClass("active");
            });

            /*导航弹框*/
            $(".icon-gengduo").click(function () {
                $(".goods-nav").toggleClass("active");
            });


            $('.goods-header-nav-box li').click(function () {
                for (var i = 0; i < $('.goods-header-nav-box li').size() ; i++) {
                    if (this == $('.goods-header-nav-box li').get(i)) {
                        $('.goods-header-nav-box li').eq(i).children('a').addClass('hover');
                    } else {
                        $('.goods-header-nav-box li').eq(i).children('a').removeClass('hover');
                    }
                }
            })
        })
    </script>
    <script>
        /*切换*/
        var tabsSwiper = new Swiper('#j-tab-con', {
            speed: 100,
            noSwiping: true,
            autoHeight: true,
            onSlideChangeStart: function () {
                $(".j-tab-title .active").removeClass('active')
                $(".j-tab-title li").eq(tabsSwiper.activeIndex).addClass('active')
            }
        })
        $(".j-tab-title li").on('touchstart mousedown', function (e) {
            e.preventDefault()
            $(".j-tab-title .active").removeClass('active')
            $(this).addClass('active')
            tabsSwiper.slideTo($(this).index())
        })
        $(".j-tab-title li").click(function (e) {
            e.preventDefault()
        })

    </script>
</body>

</html>
